<template>
	<div>
		<!-- 材料信息 -->
		<van-row>
			<van-col span="4">
				<van-image
				  style="margin-top: 10%;"
				  width="70"
				  height="70"
				  src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/material_detail.png"
				/>
			</van-col>
			<van-col span="18" offset="0">
				<div style="margin-top: 5%;margin-left: 5%;font-size: 28rpx;">
					<div style="margin-bottom: 3%;">
						<span style="margin-right: 2%;">
							{{ material_name }}
						</span>
						<span>
							|
						</span>
						<span style="margin-left: 2%;">
							{{ material_model }}
						</span>
					</div>
					<div>
						<span style="color: #9d9c9c;margin-right: 3%;">实时库存</span>
						<span>
							{{ material_num }}{{material_unit}}
						</span>
			 	</div>
				</div>
			</van-col>
		</van-row>
		<van-divider />
		<!-- 出入库 -->
		<div style="margin-bottom: 3%;">
			<div style="margin-left: 20%;">
				<van-button type="warning" color="#1989fa" style="margin-right: 40%;" @click="wareMaterial()">入库</van-button>
				<!-- <van-button type="warning" color="#07c160" @click="issueMaterial()">出库</van-button> -->
			</div>
			
		</div>
		<!-- 流水详细 -->
		<div v-for="(item, index) in material_details" :key="index" style="width: 90%;margin: auto">
			
			<div v-if="item.type === '0'" style="margin-bottom: 3%;">
				<div style="position: relative;;background-color: #eaf4fd;border-left: 5px solid #2d7ee9;border-radius: 5rpx;padding: 3%;">
					<div style="position: absolute;right: 3%;">
						<van-tag type="primary" size="large">入库</van-tag>
					</div>
					<p style="margin-bottom: 3%;">{{ item.time }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">供料单位:</span>{{ item.company }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">存放位置:</span>{{ item.ware_place }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">入库数量:</span>{{ item.ware_issue_num }}{{ material_unit }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">库存数量:</span>{{ item.ware_kc_num }}{{ material_unit }}</p>
				</div>
			</div>
			<div v-if="item.type === '1'" style="margin-bottom: 3%;" @longpress="backIssue(item)">
				<div style="position: relative;background-color: #ebf9e8;;border-left: 5px solid #30c15b;border-radius: 5rpx;padding: 3%;">
					<div style="position: absolute;right: 3%;">
						<van-tag type="success" size="large">出库</van-tag>
					</div>
					<p style="margin-bottom: 3%;">{{ item.time }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">用料单位:</span>{{ item.company }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">使用部位:</span>{{ item.use_body }}</p>
					<p style="margin-bottom: 3%;"><span style="margin-right: 2%;">出库数量:</span>{{ item.ware_issue_num }}{{material_unit}}</p>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '@/util/util.js';
	const PrefixUrl = BaseUrl();
	export default {
		data() {
			return {
				material_id: '',
				material_name: '',
				material_model: '',
				material_num: '',
				material_unit: '',
				material_code: '',
				equiment_manu: '',
				equiment_source: '',
				material_id_encrypt: '',
				material_details: [],
				warehouse_cess: '',
				warehouse_money: '',
			}
		},
		onShow(){
			uni.request({
				method: 'GET',
				url: PrefixUrl + '/equimentWare/getWareIssueByMaterialId',
				data: {
					material_id: this.material_id_encrypt
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'token': uni.getStorageSync('token')
				},
				success: (res) => {
					this.material_name = res.data.obj.materialName
					this.material_model = res.data.obj.materialModel
					this.material_num = res.data.obj.equimentNum
					this.material_code = res.data.obj.materialCode
					this.equiment_source = res.data.obj.equimentSource
					this.equiment_manu = res.data.obj.equimentManu
					this.warehouse_cess = res.data.obj.materialCess;
					this.warehouse_money = res.data.obj.materialMoney;
					this.material_id = res.data.obj.id
					this.material_details = res.data.obj2
				}
			});
		},
		onLoad: function(option) {
			this.material_id_encrypt = option.id;
			uni.request({
				method: 'GET',
				url: PrefixUrl + '/equimentWare/getWareIssueByMaterialId',
				data: {
					material_id: option.id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'token': uni.getStorageSync('token')
				},
				success: (res) => {
					console.log(res)
					this.material_name = res.data.obj.materialName
					this.material_model = res.data.obj.materialModel
					this.material_num = res.data.obj.equimentNum
					this.material_code = res.data.obj.materialCode
					this.equiment_source = res.data.obj.equimentSource
					this.equiment_manu = res.data.obj.equimentManu
					this.warehouse_cess = res.data.obj.materialCess;
					this.warehouse_money = res.data.obj.materialMoney;
					this.material_id = res.data.obj.id
					this.material_unit = res.data.obj.materialUnit
					this.material_details = res.data.obj2
				}
			});
		},
		created() {

		},
		methods: {
			wareMaterial(){
				uni.navigateTo({
					url: '/pages/equipment/ware/ware_detail?id=' + this.material_id +
						'&name=' + this.material_name + '&model=' + this.material_model + 
						'&equimentSource=' + this.equiment_source + '&equimentManu=' + this.equiment_manu +
						'&materialCode=' + this.material_code  + '&materialCess=' + this.warehouse_cess + 
						'&materialMoney=' + this.warehouse_money
				});
			},
			issueMaterial(){
				uni.navigateTo({
					url: '/pages/equipment/issue/issue_detail?id=' + this.material_id +
						'&name=' + this.material_name + '&model=' + this.material_model + 
						'&equimentSource=' + this.equiment_source + '&equimentManu=' + this.equiment_manu +
						'&materialCode=' + this.material_code
				});
			},
			backIssue(item){
				uni.navigateTo({
					url: '/pages/equipment/issue/back_issue?id=' + item.id 
				});
				console.log(item)
			}
		}
	}
</script>

<style>
</style>
